<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import {useRoute} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {getYuyueServiceInfo} from "@/api/date";

const now = ref(new Date());
const mapremain = ref({})
const datelist = ref([])
const selectday = ref({})
const today = ref(new Date());  
const endday = ref(new Date());  
  
const onClick = (date) => {

  console.log('onClick', date.getFullYear());

  // 获取月份并加1，然后使用toString()和padStart(2, '0')确保它是两位数  
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  console.log('onClick', month); // 这里也会显示月份，但已经是两位数格式了  

  console.log('onClick', date.getDate());

  // 拼接年份、月份和日期，确保它们都是两位数  
  let id = date.getFullYear() + '-' + month + '-' + date.getDate().toString().padStart(2, '0');
  console.log(id);
  selectday.value = id;
  console.log(selectday)
};
onClick(new Date());
const route = useRoute();

function toConfirmorder() {
  if (!selectday.value) {
    alert("请选择日期")
    return
  }
  console.log("selectday", selectday.value)
 
  if(route.query.familyid !== null || route.query.familyid !== undefined){
    console.log("family",route.query.familyid)
    router.push({
      path: "/confirmorder",
    query: {
      hpId: route.query.hpId,
      smId: route.query.smId,
      familyid:route.query.familyid,
      selectday: selectday.value,
     
    },
  });
  }else{
    router.push({
    path: "/confirmorder",
    query: {
      hpId: route.query.hpId,
      smId: route.query.smId,
      selectday: selectday.value
    }
  })
  }
 
}

const mappedData = computed(() => {
  return datelist.value.reduce((acc, item) => {
    const key = `${item.year}-${item.month.padStart(2, '0')}-${item.day.padStart(2, '0')}`;
    acc[key] = item.totalAmount;
    return acc;
  }, {});
});


const getYuyueInfo = async () => {
  let result = await getYuyueServiceInfo({hpId: 1});
  datelist.value = result.data;
  let last=datelist.value[datelist.value.length-1];
  console.log("last",last)
  endday.value=new Date(last.year,last.month-1,last.day)
};

const Chooseday = (data) => {
  selectday.value = data;
}

const getTotal = (data) => {
  let month = data.month + 1;
  const id = `${data.year}-${month.toString().padStart(2, '0')}-${data.day.toString().padStart(2, '0')}`;
  if (mappedData.value[id] === 0 || mappedData.value[id]) {
    return mappedData.value[id]
  }
  return null;
}
onMounted(async () => {
  await getYuyueInfo();
});


</script>

<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>选择体检日期</p>
      <div></div>
    </header>
    <div class="top-ban"></div>

    <div v-loading="datelist.length===0">
      <vue-hash-calendar
          :min-date="today"
          :max-date="endday"
          @click="onClick"
          style="width: 100vw;height: 50vh;">

        <template #day={date}>
          <div class="lunar-content" style="height: 20px;">
            <div style="text-align: center;">{{ date.day }}</div>
            <div class="daycontent" v-show="getTotal(date) !== null">余{{ getTotal(date) }}</div>
          </div>
        </template>
      </vue-hash-calendar>
    </div>


    <div class="bottom-btn">
      <div></div>
      <div @click="toConfirmorder">下一步</div>
    </div>

    <div class="bottom-ban"></div>
    <Footer>

    </Footer>
  </div>


</template>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F9F9F9;
}

/*********************** header ***********************/
header {
  width: 100%;
  height: 15.7vw;
  background-color: #FFF;

  position: fixed;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0 3.6vw;
}

header .fa {
  font-size: 8vw;
}

/*********************** footer ***********************/
footer {
  width: 100%;
  height: 14.2vw;
  box-sizing: border-box;
  border-top: solid 1px #E9E9E9;
  background-color: #FFF;

  position: fixed;
  left: 0;
  bottom: 0;
}

footer ul {
  width: 100%;
  height: 14.2vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 3vw;
  color: #999;

  user-select: none;
  cursor: pointer;
}

footer ul li .fa {
  font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban {
  width: 100%;
  height: 15.7vw;
}

.bottom-ban {
  width: 100%;
  height: 14.2vw;
}

/*********************** section ***********************/
section {
  width: 82vw;
  margin: 0 auto;
  margin-top: 12vw;
}


.fontcolor {
  color: #333;
}

.pselect {
  background-color: #FB902B;
  color: #FFF;
}

/*********************** bottom-btn ***********************/
.bottom-btn {
  width: 100%;
  height: 12vw;
  background-color: #FFF;

  position: fixed;
  left: 0;
  bottom: 14.2vw;

  display: flex;
}

.bottom-btn div:first-child {
  flex: 2;
}

.bottom-btn div:last-child {
  flex: 1;
  background-color: #117C94;
  text-align: center;
  line-height: 12vw;
  font-size: 5vw;
  color: #FFF;

  user-select: none;
  cursor: pointer;
}

.day-content {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  align-items: center;
  text-align: center;
}

.block-style {
  display: block;
}

.daycontent {
  font-size: 10px;
  transform: scale(0.6);
  width: 10vw;
  text-align: center;
  color:chocolate;
}

.lunar-content{
  display: flex;
  align-items: center;
  flex-direction: column;
}
</style>
